<template>
	<a-card :bordered="false">
		<a-upload :accept="fileType" :customRequest="importRoster" :showUploadList="false">
			<a-button type="primary" :loading="uploading">导入</a-button>

		</a-upload>
		<a-button type="primary" :disabled="!hasSelected" :loading="state.loading" @click="reduce"
			style="margin-left: 18px;">
			删除
		</a-button>
		<a-table ref="table" class="sy-table" :columns="columns" :data-source="datas" :tool-config="toolConfig"
			:pagination="false" :row-key="(record) => record.id" :expandedRowKeys="expandedRowKeys"
			:row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }">
			<template #expandIcon style="display: none"> </template>

			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'operation'">
					<div style="display: flex; gap: 32px">
						<a style="width: max-content" @click="showDetail(record)">编辑</a>
					</div>
				</template>
				<template v-if="column.dataIndex === 'appName'">
					<div style="display: flex; align-items: center">
						<img style="width: 30px; height: 30px; margin-right: 10px" :src="setLogo(record)" alt="" />
						<div>{{ record.appName }}</div>
						<div style="margin-left: 8px">AppID:{{ record.appCode }}</div>
					</div>
				</template>
				<template v-if="column.dataIndex === 'appAccess'">
					<span>
						{{ handleAppAccess(record.appAccess) }}
					</span>
				</template>
			</template>
		</a-table>

		<div class="box-pagin">
			<a-pagination show-size-changer show-quick-jumper :show-total="(total) => `共 ${total} 条`"
				v-model:current="searchFormState.current" v-model:pageSize="searchFormState.size" :total="total"
				@change="pageNumberChange" />
		</div>
	</a-card>
	<!-- <PickPeople ref="pick" @succses="setUser" v-if="roleList.length > 0" :roleList="roleList" /> -->
</template>

<script setup name="appinfo">
import appInfoApi from '@/api/fullApp/index'
import PickPeople from '@/components/pickPeople/index.vue'
import bizRoleApi from '@/api/biz/bizRoleApi'
import { useRouter } from 'vue-router'
import sysConfig from '@/config/index'
const router = useRouter()
const fileUrl = import.meta.env.VITE_FILE_URL
onMounted(() => {
	loadData()
})
let searchFormState = reactive({
	appName: undefined,
	appAccess: undefined,
	current: 1,
	size: 10,
	orgId: ''
})
const table = ref()
const total = ref(0)
const roleList = ref([])
const uploading = ref(false)
const pageNumberChange = (page, pageSize) => {
	searchFormState.current = page
	searchFormState.size = pageSize
	loadData()
}
const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
const columns = [
	{
		title: '应用信息',
		dataIndex: 'appName'
	},
	{
		title: '应用来源',
		dataIndex: 'appAccess'
	},
	{
		title: '操作',
		dataIndex: 'operation',
		width: 50
	}
]
const datas = ref([])
const state = reactive({
	selectedRowKeys: [],
	// Check here to configure the default column
	loading: false,
});
const hasSelected = computed(() => state.selectedRowKeys.length > 0);
const onSelectChange = selectedRowKeys => {
	state.selectedRowKeys = selectedRowKeys;
};
const reduce = () => {
	state.loading = true
	const params = state.selectedRowKeys.map((m) => {
		return {
			id: m
		}
	})
	appInfoApi.fullDelete(params).then(() => {
		searchFormState.current = 1
		loadData()
		state.loading = false
	}).catch(err => {
		state.loading = false
	})
}

//列表状态数据过滤
const statusData = [
	{ key: '0', name: '已临时下架' },
	{ key: '1', name: '已上线' },
	{ key: '2', name: '编辑中' },
	{ key: '3', name: '升级中' },
	{ key: '4', name: '下架中' },
	{ key: '5', name: '灰度发布' },
	{ key: '6', name: '取消灰度' },
	{ key: '7', name: '恢复上架中' },
	{ key: '8', name: '永久下架' }
]

provide('statusData', statusData)
const filStatus = (status) => {
	return statusData.find((v) => v.key == status).name
}
// logo显示
const setLogo = (record) => {
	let str = ''
	if (record.pcLogo && record.pcLogo.includes('group')) {
		str = `${sysConfig.FULL_URL}${record.pcLogo}`
	}
	return str
}
//列表
const loadData = () => {
	return appInfoApi.list(searchFormState).then((data) => {
		if (data) {
			datas.value = data?.records
			total.value = data?.total
			searchFormState.current = data?.current
			searchFormState.size = data?.size
		}
	})
}

//查看详情主表
const showDetail = (item) => {
	router.push({
		path: '/fullApp/fullList/editForm',
		query: {
			data: JSON.stringify(item)
		}
	})
}

//应用接入数据处理
const handleAppAccess = (item) => {
	let str
	// //1门户 移动
	if (item) {
		const arr = item.split(',')
		str = arr.map((item) => {
			if (item == '1') {
				item = '门户应用'
			} else {
				item = '移动端应用'
			}
			return item
		})
	} else {
		str = []
	}
	return str.join(' , ')
}

// 导入
const importRoster = (file) => {
	const form = new FormData()
	form.append('file', file.file)
	appInfoApi
		.oldToChannel(form)
		.then((res) => {
			searchFormState.current = 1
			searchFormState.size = 10
			loadData()
			uploading.value = false
		})
		.catch(() => {
			uploading.value = false
		})
}

const getRoleList = () => {
	bizRoleApi.ruleList().then((data) => {
		roleList.value = data
	})
}
getRoleList()
</script>
<style lang="less" scoped>
.bord {
	border-bottom: 1px solid rgb(229, 229, 229);
}

.zlabel {
	color: rgb(245, 63, 63);
	font-size: 12px;
	margin-bottom: 10px;
}

.box-pagin {
	margin-top: 24px;
	text-align: right;
}

.btn {
	text-align: right;
	margin-top: 10px;

	.bt1 {
		margin-right: 10px;
	}
}
</style>
<style>
.sy-table {
	margin-top: 8px;
}

.sy-table .ant-table-thead>tr>th:nth-child(3)::before {
	width: 0 !important;
}
</style>
